<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <div class="grid-content bg-purple">
                                <el-form :model="form" size="medium" :status-icon="true" ref="form"
                                         label-position="top" label-width="100px" class="demo-ruleForm" style="margin-top: 25px">
                                    <el-form-item label="菜单名称：" prop="menu.title">
                                        <el-input v-model="form.menu.title" placeholder="请填写菜单名称"></el-input>
                                    </el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item label="菜单动作：" prop="menu.action">
                                        <el-radio-group v-model="form.menu.action">
                                            <el-radio label="1">链接</el-radio>
                                            <!--<el-radio :label="2">触发关键字</el-radio>-->
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item label="菜单链接" prop="menu.value">
                                        <el-input v-model="form.menu.value" placeholder="菜单跳转链接"></el-input>
                                    </el-form-item>
                                    <el-form-item label="" v-if="form.menu.action == 1">
                                        <p style="color: red">注意: 指定点击此菜单时要跳转的链接（注：链接需加http://或者https://）</p>
                                    </el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item></el-form-item>
                                    <el-form-item style="text-align: center">
                                        <el-button type="primary" @click="update()">保 存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="grid-content bg-purple phone">
                                <div class="phone-contnet">
                                    <div class="phone-contnet-title"></div>
                                    <div class="phone-menu">
                                        <ul>
                                            <li v-for="(menu,index) in menus"
                                                :key="index"
                                                :class="[{ 'li-two': menus.length==2, 'li-three': menus.length==3 }]">
                                                <span @click="editMenuInfo(index)">{{ menu.title }}</span>
                                                <i v-if="index>0" @click="closeMenu(index)" class="menu-close"></i>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <span v-if="menus.length < 3" class="add-menu" @click="pushMenu"><i class="fa fa-plus"></i> 菜单</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {MenuInfo,MenuUpdate} from '@/utils/request';
    export default {
        data() {
            return {
                menus: [],
                form: {id: 1,menu: {title:'菜单名称',action:'1',value:''}},
            }
        },
        activated() {
            this.info()
        },
        methods: {
            editMenuInfo(index){
                this.form.menu= this.menus[index];
            },
            pushMenu(){
                this.menus.push({title:'菜单名称',action:'1',value:''});
            },
            closeMenu(index){
                this.menus.splice(index,1);
            },
            info() {
                MenuInfo().then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        if(res.data && res.data.menu && res.data.menu.length){
                            this.form = {
                                id: res.data.id,
                                menu: res.data.menu[0]
                            };
                            this.menus = res.data.menu;
                        }else{
                            this.menus.push(this.form.menu);
                        }
                    }
                })
            },
            update() {
                MenuUpdate({menu:this.menus,id:this.form.id}).then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            duration: '1000',
                            message: res.msg,
                        });
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
